<template>
  <div>
    <div class="dw">
      <img style="width: 100vw;height: 220px" src="../../assets/img/ss.png" />
    </div>
    <div class="zd" style="">
      <!-- <img src="" /> -->
      <div class="wbj">
        <div class="disp">
          <div @click="$router.push('xggrxx')">
            <img class="tp" width="60px" height="60px" :src="userInfo?.avatar" />
          </div>
          <div class="nickname">
            {{ userInfo?.nickname }}
          </div>
        </div>
        <div class="zl" @click="$router.push('xggrxx')">编辑资料</div>
      </div>
    </div>
    <van-cell style="margin: 8px 0;" is-link title="我的发布" @click="fb" />
    <van-cell style="margin: 8px 0;" is-link title="浏览历史" @click="llls" />
    <van-cell style="margin: 8px 0;" is-link title="我的收藏" @click="sc" />
    <van-cell style="margin: 8px 0;" is-link title="修改密码" @click="xgmm" />
 
    <div class="sc" @click="tc" style="margin: 130px 10px 0 10px;">退出登录</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {

    }
  },
  created() {
    // this.ImagePreview=this.userInfo.avatar
  },
  computed: {
    ...mapState("mkhuser", ["userInfo"]),
  },

  mounted() {
    console.log(this.userInfo);
  },
  methods: {
    tc() {
      this.$emit("tc");
    },
    xgmm() {
      this.$emit("xgmm");
    },
    fb() {
      this.$emit("fb");
    },
    sc() {
      this.$router.push('sc')
    },
    llls() {
      this.$router.push('llls')
    },
  },
};
</script>

<style scoped>
.sc{
  background: #d12d1a;
		color: #FFB619;
  font-size: 15px;
  text-align: center;
  padding: 15px 0;

}
.tp {
  border: 1px solid rgb(220, 220, 220);
  border-radius: 8px;
}

.disp {
  display: flex;
}

.nickname {
  color: rgb(255, 255, 255);
  font-size: 23px;
  margin: 15px 0 0 10px;
}

.wbj {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;

}

/* .zd{
   background-image: url('../../assets/img/bjjj.png'); 
   background-repeat: no-repeat;
   background-size: 450px;
} */
.zl {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 25px;
  height: 15px;
  padding: 2px 10px 7px 10px;
  margin: 5px 0 0 100px;
}

.dw {
  position: relative;
}

.zd {
  position: absolute;
  top: 70px;
  left: 0;
}
</style>